<!DOCTYPE html>
<html lang="en">

    <head>

      <meta charset="utf-8">

      <title>About Project</title>

      <!-- Bootstrap core CSS -->
      <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

      <!-- Custom fonts for this template -->
      <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet">
      <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">

      <!-- Custom styles for this template -->
      <link href="css/hs.min.css" rel="stylesheet">

      <!-- Custom styles for svg and D3 elements -->
      <link rel="stylesheet" href="css/about.css">

    </head>

    <body id="page-top">
    
    <!--   Navigation panel -->
    <nav class="navbar navbar-expand-lg navbar-dark  fixed-top" id="sideNav" style="background-color: darkred">
        <a class="navbar-brand js-scroll-trigger" href="#page-top">
          <span class="d-block d-lg-none">Himanshu Sharma</span>
          <span class="d-none d-lg-block">
            <img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="img/profile.jpg" alt="">
          </span>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#about">About Project</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="index.html">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="movie_creator.html">Movie Creator</a>
            </li>
             <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="movie_viewer.html">Movie Viewer</a>
            </li>
          </ul>
        </div>
    </nav>

    <!--   Container DIV  -->
      <div class="container-fluid p-0">

        <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="about">
          <div class="w-100">
            <h2 class="mb-0">
              <span class="text-primary">Data Exploration and Visualisation</span>
            </h2>
            <div class="subheading mb-5">
               
                <div class="card bg-light text-dark" style="width:80%;  margin-bottom: 30px;">
                    <div class="card-body" style="width:100%"><p>This visualisation project focuses on the IMDB 5000 Movies dataset from Kaggle. Its objective is to provide an easy to interact one stop solution for its users. Target audience are mainly the Movie Creators (like producers directors etc.) and Movie Viewers (the movie watchers) both of the users have different perspective to look at this data. Like Creators will be more focused on the relation between the budget they invest and the gross their movie can earn or which genre is more profitable. And Viewers will like to watch best movies based on their mood or taste of genre. This project is an effort to bring interactiveness and a good user experience to its users. It is developed in D3.js, HTML, CSS, jquery.</p></div>
                </div><br>

            </div>
            <p class="lead mb-5"></p>

          </div>
        </section>

      </div>

      <!-- Bootstrap core JavaScript -->
      <script src="vendor/jquery/jquery.min.js"></script>
      <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

      <!-- Plugin JavaScript -->
      <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

      <!-- Custom scripts for this template -->
      <script src="js/hs.min.js"></script>

       <!-- Load d3.js -->
       <script src="https://d3js.org/d3.v4.js"></script>
       <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
       <script type="text/javascript" src="js/about.js"></script>

    </body>

</html>
